<template>
  <div class="nav"
       ref="nav">
    <ul class="nav-list">
      <li class="nav-item "
          :class="{active:currentIndex === index}"
          v-for="(item,index) of nav"
          :key="item.id"
          @click="handleNav(index)"
          ref="navItem">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'ClassifyNav',
  props: {
    nav: {
      type: Array
    },
    currentIndex: {
      type: Number
    }
  },
  methods: {
    handleNav (index) {
      this.scroll(index)
      this.$emit('changeIndex', index)
    },
    scroll (index) {
      const height = this.$refs.navItem[index].offsetTop
      this.$refs.nav.scrollTo({
        top: height,
        behavior: 'smooth'
      })
    }
  },
  watch: {
    currentIndex (i) {
      this.scroll(i)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.nav
  .nav-list
    width 200px

    .nav-item
      height 115px
      line-height 115px
      font-size $shop_name
      font-weight 400
      color $footer_bgc
      text-align center
      margin-bottom 2px
      background $space
      border-left 6px solid $space
      box-sizing border-box
      width 100%
      ellipsis()

      &:active
        background-color #e6e6e6

    .active
      background-color $common_bgc
      border-color $tab_active
      color $tab_active
</style>
